<template>
    <!-- 考试-场次 -->
    <div class="question-bank-list-wrap">
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item >
                    <!-- 开考日期范围 -->
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item >
                    <!-- 选择创建人 -->
                    <el-select filterable @change="search" v-model="searchForm.account" placeholder="请选择创建人">
                        <el-option label="全部创建人" value=""></el-option>
                        <el-option
                            v-for="item in createUser"
                            :key="item.userId"
                            :label="item.name"
                            :value="item.accountName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input
                        placeholder="请输入考试名称"
                        v-model="searchForm.content"
                        @keyup.enter.native="search"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">更多操作</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="add">新增</el-dropdown-item>
                        <el-dropdown-item command="batchDeletion">批量删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-row>
        <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=-1" :class="searchForm.status==-1 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-4">{{ examStatistics.totalNum }}</p>
                    <p class="item-title">考试总数</p>
                </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=0" :class="searchForm.status==0 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-3">{{ examStatistics.unStartNum }}</p>
                    <p class="item-title">未开始</p>
                </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=1" :class="searchForm.status==1 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-1">{{ examStatistics.startingNum }}</p>
                    <p class="item-title">考试中</p>
                </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=2" :class="searchForm.status==2 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-2">{{ examStatistics.endNum }}</p>
                    <p class="item-title">已结束</p>
                </div>
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="examTableList"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="考试名称" prop="name" width="300"></el-table-column>
                <el-table-column label="考试状态" prop="status">
                    <template slot-scope="props">
                        <p>{{ mapStatus(props.row.status) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="开考时间" prop="beginTime" width="200"></el-table-column>
                <el-table-column label="结束时间" prop="endTime" width="200"></el-table-column>
                <el-table-column label="应考比率" prop="examCount" width="250">
                    <template slot-scope="props">
                        <el-progress 
                            text-inside
                            :stroke-width="20"
                            :percentage="utils.completionDegree(props.row.examFinishCount, props.row.examCount)"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column label="答题限时" prop="timeLimit">
                    <template slot-scope="props">
                        <p>{{ props.row.timeLimit + '分钟' }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" width="250"></el-table-column>
                <el-table-column label="创建人" prop="createAccountName" width="150"></el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                        <span v-if="scope.row.status == 0" class="dividing-line">|</span>
                        <el-button v-if="scope.row.status == 0" @click="editQuestionInfo(scope.row)" type="text" size="small">编辑</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="copyExamPaper(scope.row)" type="text" size="small">复制</el-button>
                        <span  v-if="scope.row.status == 0" class="dividing-line">|</span>
                        <el-button  v-if="scope.row.status == 0" @click="deleteExamPaper(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column type="expand" width='1'>
                    <template slot-scope="scope">
                        <!-- 考试详情预览 -->
                        <exam-detail :info="scope.row"></exam-detail>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 新增/编辑考试弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="1200px"
            top='10vh'
            v-if="dialogExamInfo"
            :visible.sync="dialogExamInfo"
            @close="closeExamPaperInfo"
            v-dialogDrag>
            <exam-info :oldInfo="currentExamPaperInfo" :closeFun="closeExamPaperInfo"></exam-info>
        </el-dialog>
    </div>
</template>
<script>
import utils from '@/utils/util'
import { getExamRecords, getExamCount, delExams } from '@/api/exam'
import { getUsers} from '@/api/api'
import ExamInfo from './Dialog/ExamInfo'
import ExamDetail from './Dialog/ExamDetail'

export default {
    components: {
        ExamInfo,
        ExamDetail
    },
    data() {
        return {
            utils: utils,
            loading: true,
            createUser: [],
            searchForm: {
                time: '',
                status: -1,
                account: '',
                content: ''
            },
            examStatistics: {
                totalNum: 0,
                unStartNum: 0,
                startingNum: 0,
                endNum: 0,
            },
            tableData: [],
            selectedExamPaper: [], // 勾选的试题
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogTitle: '新增试卷',
            currentExamPaperInfo: {}, // 当前操作的试卷信息
            dialogExamInfo: false,
        }
    },
    created() {
        this.getCreatUser()
        this.search()
    },
    methods: {
        mapStatus(key) {
            let MapList = {
                0: '未开始',
                1: '考试中',
                2: '已结束',
            }

            return MapList[key] || ''
        },
        getCreatUser() {
            //人员信息
            getUsers({
                orgId: this.$store.state.userinfo.org.id,
                roleIds: '142,143,144,145,146,147,153,158,160,172,177',
                queryType:0
            }).then(res => {
                this.createUser.push.apply(this.createUser, res.data);
            })
        },
        // 获取统计信息
        getStatisticsData() {
            let that = this
            getExamCount({
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '',
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                status: -1,
                content: that.searchForm.content, // 题干内容
                account: that.searchForm.account, // 当前登录账号
            }).then(res => {
                if(res.status === 200) {
                    $.extend(that.examStatistics, res.data)
                }
            })
        },
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            
            getExamRecords({
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                status: that.searchForm.status, // 考试状态
                content: that.searchForm.content, // 考试名称搜索
                account: that.searchForm.account, // 创建人账号
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
            
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        search() {
            this.getStatisticsData()
            this.getTableData(1)
        },
        // 多选
        handleSelectionChange(val) {
            this.selectedExamPaper = val
        },
        // 更多操作
        handleCommand(command) {
            let that = this

            switch (command) {
                case 'add':
                    that.addExamPaper()
                    return false
                case 'batchDeletion':
                    that.batchDeletion()
                    return false
                default:
                    return false
            }
        },
        // 新增考试
        addExamPaper() {
            this.dialogTitle = '新增考试'
            this.currentExamPaperInfo = {}
            this.dialogExamInfo = true
        },
        // 批量删除
        batchDeletion() {
            let ids = []
            for(let i=0, len=this.selectedExamPaper.length; i < len; i++) {
                ids.push(this.selectedExamPaper[i].id)
            }
            if(ids.length > 0) {
                // 调用删除
                this.deleteExamPaper(ids.join(','))
            } else {
                this.$message({
                    type: 'warning',
                    message: '请勾选你要删除的考试!'
                })
                return false
            }
        },
        // 查看详情
        handleDetail(row) {
            this.$refs.examTableList.toggleRowExpansion(row)
        },
        // 编辑
        editQuestionInfo(info) {
            let that = this

            that.dialogTitle = '编辑考试'
            
            that.currentExamPaperInfo = info
            that.dialogExamInfo = true
        },
        // 复制
        copyExamPaper(info) {
            let that = this
            let oldInfo = $.extend({}, info)
            that.dialogTitle = '新增考试'
            oldInfo.name = info.name + '-复制'
            
            // 复制时清空createAccount
            oldInfo.createAccount = ''

            that.currentExamPaperInfo = oldInfo
            this.dialogExamInfo = true
        },
        // 删除
        deleteExamPaper(ids) {
            let that = this

            this.$confirm("确定删除？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
                delExams({
                    ids: ids
                }).then(res => {
                    if(res.status === 200) {
                        that.$message.success('删除成功！')
                        // 刷新列表和统计
                        that.search()
                    }
                })
            }).catch(() => {

            })
        },
        // 关闭弹框
        closeExamPaperInfo(refresh) {
            this.dialogExamInfo = false
            if(typeof(refresh) === 'boolean' && refresh) {
                this.getStatisticsData()
                this.getTableData(this.currentExamPaperInfo.id?'':1)
            }
        },
    },
    computed: {
        statusChange() {
            return this.searchForm.status
        }
    },
    watch: {
        statusChange(val, oldVal) {
            this.getTableData(1, 10)
        }
    }
}
</script>
